<script lang="ts" setup>
  import  useLogin  from "../hooks/useLogin"
  import { SuccessFilled, ArrowRight} from '@element-plus/icons-vue'
  const { QRcodeUrl, isGettingQR } = useLogin()
</script>

<template>
  <el-card class="Qrcode">
          <div class="qrcode-container">
            <!-- 导航切换 -->

            <!-- 二维码主体 -->
            <div class="qrcode-main">
              <!-- 二维码显示容器 -->
              <div class="qrcode-wrapper">
                <img :src="QRcodeUrl" class="qrcode-image" alt="扫码登录二维码" v-if="!isGettingQR" />
                <div v-if="isGettingQR" class="qrcode-loading">
                  <el-icon class="loading-icon" color="#5a3e2f" :size="40"><Loading /></el-icon>
                </div>
              </div>

              <!-- 安全提示 -->
              <div class="safety-tip">
                <el-icon class="safe-icon" :size="16"><SuccessFilled /></el-icon>
                <span>当前环境安全</span>
              </div>
            </div>

            <!-- 操作步骤 -->
            <div class="step-guide">
              <div class="step-item">
                <div class="step-number">1</div>
                <div class="step-text">打开手机微信</div>
              </div>
              <el-icon class="arrow" :size="20"><ArrowRight /></el-icon>
              <div class="step-item">
                <div class="step-number">2</div>
                <div class="step-text">点击扫一扫</div>
              </div>
            </div>

            <!-- 扫码 -->
          </div>
        </el-card>
</template>

<style lang="scss" scoped>
  .Qrcode{
  border-radius: 0 20px 20px 0;
  background-color: rgba($color: #BBB, $alpha: 0.2);
  .qrcode-container {
  background: #fff;
  background-image: url("../../../assests/loginPictures/qr.png");
  background-size: 100% 100%;
  border-radius: 8px; 
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 100px 50px;
  height: 60vh;

  .qrcode-main {
    position: relative;
    margin-bottom: 40px;

    .qrcode-area {
      text-align: center;

      .camera-icon {
        margin-bottom: 16px;
      }

      .tip-text {
        color: #606266;
        margin-bottom: 12px;
      }

      .refresh-link {
        display: inline-flex;
        align-items: center;
        color: #5a3e2f;
        cursor: pointer;

        .el-icon {
          margin-right: 4px;
        }
      }
    }

    .safety-tip {
      position: absolute;
      bottom: -28px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      color: #67c23a;
      font-size: 12px;

      .safe-icon {
        margin-right: 4px;
      }
    }
  }

  .step-guide {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;

    .step-item {
      text-align: center;

      .step-number {
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: #5a3e2f;
        color: #fff;
        border-radius: 50%;
        margin: 0 auto 8px;
      }

      .step-text {
        color: #606266;
        font-size: 14px;
      }
    }

    .arrow {
      color: #c0c4cc;
    }
  }

  .other-login {
    text-align: center;

    .el-divider {
      :deep(.el-divider__text) {
        color: #909399;
        font-size: 12px;
      }
    }

    .wechat-icon {
      color: #67c23a;
      margin-top: 12px;
      cursor: pointer;
    }
  }
}
.qrcode-wrapper {
  width: 240px;
  height: 240px;
  margin: 0 auto 20px;
  position: relative;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.qrcode-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

.qrcode-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;

  .loading-icon {
    animation: rotating 2s linear infinite;
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
}

  //同意协议
    .protocol {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #606266;
    font-size: 0.8rem;

    .el-checkbox {
      margin-right: 0.3rem;
    }

    .el-link {
      margin: 0 0.2rem;
    }
  }

</style>